<template>
  <div class="content">
    <!-- <smChartTitle :title="title" :to="to"></smChartTitle> -->
    <chartTitle :title="title"></chartTitle>
    <div class="group" v-if="tab">
      <div
        :class="btnActived == index + 1 ? 'active' : ''"
        @click="_tabClick(item, index + 1)"
        v-for="(item, index) in tabList"
        :key="index"
      >
        {{ item }}
      </div>
    </div>
    <div class="rank-content">
      <div class="average-legend" v-if="markLineShow">
        <span></span>
        平均值
      </div>
      <div :id="id" :data="data"></div>
    </div>
  </div>
</template>

<script>
// import smChartTitle from './smChartTitle.vue'
import chartTitle from '../chart-title/index.vue'
export default {
  components: {
    chartTitle
  },
  props: {
    title: {
      type: String
    },
    showLine: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    to: {
      type: String
    },
    yAxisMax: {
      type: Number
    },
    horizontal: {
      type: Boolean,
      default: false
    },
    barWidth: {
      type: [Number, String],
      default: 10
    },
    setKey: {
      type: Object
    },
    showBarTop: {
      type: Boolean,
      default: false
    },
    splitLabel: {
      type: Boolean,
      default: true
    },
    labelMax: {
      type: Number,
      default: 3
    },
    YsplitLine: {
      type: Boolean,
      default: false
    },
    XsplitLine: {
      type: Boolean,
      default: false
    },
    tab: {
      type: Boolean,
      default: false
    },
    tabList: {
      type: Array,
      default: () => {
        return ['7天', '一个月']
      }
    },
    markLineShow: {
      type: Boolean,
      default: false
    },
    markLineValue: {
      type: [Number, String]
    },
    YLabelSuffix: {
      type: String,
      default: ''
    },
    gridBottom: [String, Number],
    thresholdValue: {
      //阈值，变色
      type: Number,
      default: 1000
    }
  },
  data() {
    return {
      id: '',
      btnActived: 2,
      show: true
    }
  },
  // watch: {
  // 	data: {
  // 		immediate: true,
  // 		deep: true,
  // 		handler(val) {
  // 			console.log(val)
  // 			this.$nextTick(() => {
  // 				this._initBar()
  // 			})
  // 		},
  // 	},
  // },
  created() {
    this.id = 'rankVerBar-' + Math.random()
  },
  mounted() {
    this.$nextTick(() => {
      this._initBar()
    })
  },
  updated() {
    this.$nextTick(() => {
      this._initBar()
    })
  },

  methods: {
    _tabClick(name, index) {
      this.btnActived = index
      this.$emit('tab-click', name, index)
    },
    _initBar() {
      let _this = this
      let source = []
      let setKey = this.setKey
      if (setKey) {
        for (let i = 0; i < this.data.length; i++) {
          source.push({
            product: this.data[i][setKey.product],
            count: this.data[i][setKey.count]
          })
        }
      } else {
        source = this.data
      }
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            let data = params[0]
            return data.name + `<br>${'数量：' + data.value[data.seriesName] + this.YLabelSuffix}`
          }
        },
        grid: {
          left: '15%',
          right: '5%',
          bottom: '18%',
          top: '10%',
          containLabel: false
        },
        yAxis: [
          {
            type: 'value',
            minInterval: 1,
            // max: this.yAxisMax,
            axisLabel: {
              color: '#fff',
              fontSize: 12
              //   formatter: params => {
              //     // 超出省略
              //     params = params.toString()
              //     var maxlength = this.labelMax
              //     // console.log(typeof params)
              //     if (this.splitLabel) {
              //       if (typeof Number(params) === 'number') {
              //         let result = ''
              //         result = params / 10000
              //         if (params > 1000) {
              //           return result + '万'
              //         } else {
              //           return params
              //         }
              //       } else {
              //         if (params.length > maxlength) {
              //           return params.substring(0, maxlength) + '...'
              //         } else {
              //           return params
              //         }
              //       }
              //     } else {
              //       return params + this.YLabelSuffix
              //     }
              //   }
            },
            axisTick: {
              show: false,
              alignWithLabel: true
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9'
              }
            },
            splitLine: {
              show: this.YsplitLine,
              lineStyle: {
                color: '#2A3968'
              }
            }
          }
        ],
        xAxis: [
          {
            type: 'category',
            axisTick: {
              show: false,
              alignWithLabel: false
            },
            axisLabel: {
              //   formatter: value => {
              //     // console.log(value)
              //     if (this.splitLabel) {
              //       let result = ''
              //       if (typeof value === 'number') {
              //         result = value / 10000
              //         if (value > 1000) {
              //           return result + '万'
              //         } else {
              //           return value
              //         }
              //       } else {
              //         var maxlength = this.labelMax
              //         if (value.length > maxlength) {
              //           return value.substring(0, maxlength) + '...'
              //         } else {
              //           return value
              //         }
              //       }
              //     } else {
              //       return value
              //     }
              //   },
              color: '#fff',
              fontSize: 14
            },
            axisLine: {
              lineStyle: {
                color: '#7389B9'
              }
            },
            splitLine: {
              show: this.XsplitLine,
              lineStyle: {
                color: ['#2A3968']
              }
            }
          }
        ],

        series: [
          {
            // name: this.title.split('Top')[0],
            type: 'bar',
            barWidth: this.barWidth,
            // markLine: {
            //   symbol: 'none',
            //   silent: false,
            //   data: [
            //     {
            //       type: 'average',
            //       //type: "min/max/average" // 特殊的标注类型，用于标注最大值最小值等。
            //       lineStyle: {
            //         // 线的样式
            //         color: '#F2637B',
            //         width: 1,
            //         opacity: this.markLineShow ? 0.8 : 0
            //       },
            //       label: {
            //         // 文字的样式，默认是白色，有时候文字不显示，可能是颜色的问题
            //         show: this.markLineShow,
            //         formatter: res => {
            //           // console.log(res)
            //           let title = this.title
            //           let value = ''
            //           let isPercent = title.indexOf('率') !== -1
            //           let propValue = this.markLineValue != undefined
            //           // console.log(this.markLineValue)
            //           if (propValue) {
            //             value = isPercent ? this.markLineValue + '%' : this.markLineValue + '分'
            //           } else {
            //             value = isPercent ? res.value + '%' : res.value + '分'
            //           }
            //           return value
            //         },
            //         color: '#fff'
            //       }
            //     }
            //   ]
            // },
            itemStyle: {
              normal: {
                color: function(params) {
                  let obj = {}
                  //超过阈值柱子变色
                  // console.log('11111111')
                  // console.log(params.value.alarmCount, _this.thresholdValue)
                  if (params.value.alarmCount > _this.thresholdValue) {
                    obj = {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 1, //颜色的开始位置
                          color: '#061B34' // 0% 处的颜色
                        },
                        {
                          offset: 0, //颜色的结束位置
                          color: '#59B540' // 100% 处的颜色
                        }
                      ]
                    }
                  } else {
                    obj = {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 1, //颜色的开始位置
                          color: '#061B34' // 0% 处的颜色
                        },
                        {
                          offset: 0, //颜色的结束位置
                          color: '#00ADFD' // 100% 处的颜色
                        }
                      ]
                    }
                  }
                  return obj
                }
              }
              // normal: {
              //   label: {
              //     show: this.showBarTop,
              //     formatter: value => {
              //       // console.log(value)
              //       let str = ''
              //       for (let key in value.value) {
              //         if (key != 'product') {
              //           str = key
              //         }
              //       }
              //       let result = value.data[str] + this.YLabelSuffix
              //       // console.log(value.data[str])
              //       // result = this._formatNum(value.data[str])
              //       return result
              //     },
              //     position: this.horizontal ? 'right' : 'top',
              //     textStyle: {
              //       color: '#fff'
              //     }
              //   },
              //   color: {
              //     x: 0,
              //     y: 0,
              //     x2: 0,
              //     y2: 1,
              //     colorStops: [
              //       {
              //         offset: 1, //颜色的开始位置
              //         color: '#061B34' // 0% 处的颜色
              //       },
              //       {
              //         offset: 0, //颜色的结束位置
              //         color: '#00ADFD' // 100% 处的颜色
              //       }
              //     ]
              //     //   colorStops: [
              //     //     {
              //     //       offset: 1, //颜色的开始位置
              //     //       color: 'rgba(0,152,150,.3)' // 0% 处的颜色
              //     //     },
              //     //     {
              //     //       offset: 0, //颜色的结束位置
              //     //       color: '#0DE8FB' // 100% 处的颜色
              //     //     }
              //     //   ]
              //   }
              // }
            }
          }
        ],
        dataset: {
          source: source
        }
      }
      if (this.horizontal) {
        let x = option.yAxis
        let y = option.xAxis
        x[0].splitLine.show = false
        x[0].axisTick.show = true
        // y[0].splitLine.lineStyle.color = '#ccc'
        y[0].axisTick.show = false
        option.xAxis = x
        option.yAxis = y
        option.series[0].itemStyle.normal.color = {
          x: 1,
          y: 0,
          x2: 0,
          y2: 0,
          colorStops: [
            {
              offset: 1, //颜色的开始位置
              color: 'rgba(0,152,150,.3)' // 0% 处的颜色
            },
            {
              offset: 0, //颜色的结束位置
              color: '#0DE8FB' // 100% 处的颜色
            }
          ]
        }
      }

      if (this.showLine) {
        option.series.push({
          // name: this.title.split('Top')[0],
          symbol: 'circle',
          symbolSize: 8,
          type: 'line'
        })
      }

      this.chart = this.$echarts.init(document.getElementById(this.id))
      // console.log(option)
      this.chart.setOption(option)
      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  display: flex;
  flex-flow: column;
  // background-color: #009896;
  background-color: rgba(9, 23, 68, 0.5);
  border: 1px solid #1438ab;
  border-top: none;
  .rank-content {
    flex: 1;
    position: relative;
    margin-top: 0.926vh;

    .average-legend {
      width: auto;
      height: auto;
      position: absolute;
      display: flex;
      align-items: center;
      right: 0;
      top: 0;
      color: #fff;
      font-size: 1.3vh;
      display: flex;

      span {
        display: inline-block;
        width: 0.926vh;
        height: 0.926vh;
        background-color: #f2637b;
        margin-right: 0.926vh;
      }
    }

    > div {
      width: 100%;
      height: 100%;
    }
  }

  .group {
    display: flex;
    padding: 10px;

    div {
      min-width: 7vh;
      padding: 0 5px;
      height: 2.777vh;
      display: flex;
      justify-content: center;
      align-items: center;
      // background-image: url(../../../assets/daping/components/defaultBtn.png);
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      font-size: 1.48vh;
      color: #fff;
      cursor: pointer;
      margin-right: 5px;
      background-color: #152e69;
      border-radius: 2px;
    }

    .active {
      // background-image: url(../../../assets/daping/components/activeBtn.png);
      color: #fff;
      background-color: #316110;
      font-weight: bold;
      border: 1px solid #7dc94e;
    }
  }
}
</style>
